.view-main
{
  width:100%;
  // background: rgba(251, 251, 251, 1);
}
.view-title{
    height: 606rpx;
    position: absolute;
		z-index: -1;
		width: 100%;
		top: 0;
		left: 0;
	image{
		height: 575rpx;
		width: 100%;
	}
}
.color-white {
	color: #fff;
}
.title-content{
	width: 100%;
	left:-80rpx;
	margin-top: 90rpx;
	margin-bottom: 33rpx;
	display: flex;
	text-align: center;
	font-weight: 600;
	color: #fff;
	font-size: 36rpx;
	.searchbox {
		width: 56rpx;
		height: 56rpx;
		display: flex;
		border-radius: 50%;
		background: #00806a;
		margin: 0 63rpx 0 20rpx;
		justify-content: center;
		align-items: center;
	}
	.title-text {
		display: flex;
		align-items: center;
		font-size: 32rpx;
	}
}
.func-account {
	.img-box {
		width: 49rpx;
		height: 49rpx;
		margin-bottom: 18rpx;
	}
	.func-style {
		width: 100%;
		height: 100%;
	}
}
.view-modules {
	margin-bottom: 35rpx;
}
.bottom-bar{
	width: 100%;
	top: 544rpx;
	left:0rpx;
	padding-top: 30rpx;
	border-top-left-radius: 60rpx;
	border-top-right-radius: 60rpx;
	z-index:1;
	background: rgba(251, 251, 251, 1);

}
.module-content-modal {
	border-radius: 20rpx;
	padding: 10rpx 30rpx;
	display: flex;
	margin: 0 30rpx;
	align-items: center;
	background-color: #fff;
	box-shadow: 0px 0px 10px  rgba(0, 0, 0, 0.05);

}
.announce-box-container{
	width: 100%;
	margin-top: 20rpx;
		.announce-box {
		border-right: 1px solid rgba(216, 216, 216, 1);
    padding-right: 30rpx;
		margin-right: 20rpx;
		min-width: 58rpx;
		height: 58rpx;
	}
	.main-title {
		display: flex;
		height: 100%;
		align-items: center;
		.text {
			max-width: 100%;
		}
		.label {
			width: 60rpx;
			height: 32rpx;
			opacity: 1;
			border-radius: 10px;
			display: inline-block;
			color: #fff;
			font-size:20rpx;
			line-height: 32rpx;
			font-size: 20rpx;
			margin-left: 20rpx;
			text-align: center;
		}
		.label.hot {
			background: rgba(255, 170, 170, 1);
		}
		.label.new {
			background: rgba(144, 199, 255, 1);
		}
	}
	.more {
		min-width: 42rpx;
    display: flex;
		height: 40rpx;
    align-items: center;
		image{
			height: 10rpx;
			width: 100%;
		}
	}
	image{
		height: 100%;
		width: 100%;
	}
}
.middleTitle{
	width: 185rpx;
	height: 40rpx;
	color: #1F1F1F;
	font-weight: 400;
	line-height: 72rpx;
	font-size: 30rpx;
	display: flex;

}
.notice{
	position: relative;
	margin-top: 170rpx;
	width: 100%;
	height:70rpx;
	left:0rpx;
	z-index:2;
	.noticeBgBox{
		position: absolute;
		top: 0;
		left: 3%;
		width:94%;
		height:70rpx;
		border-radius: 50rpx;
		background: #0aaf07;
		opacity: 0.4;
	}
	.notice-content{
		position: absolute;
		display: flex;
		padding-left: 20rpx;
		top: 0;
		left: 3%;
		width:94%;
		z-index: 2;
		height:70rpx;
		border-radius: 50rpx;
		font-size: 30rpx;
		font-weight: 400;
		line-height: 70rpx;
		color: #fff;
		view{
			margin:0 auto;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			text-align: left;
		}
	}
}
.view-button-main
{
	border-radius: 20rpx;
	padding-left: 30rpx;
	padding-top:20rpx;
	padding-bottom:20rpx;
	margin: 20rpx 30rpx;
	display: grid;
	grid-template-columns: repeat(2,50%);
	row-gap: 5rpx;
    background: #fff;
	box-shadow: 0px 0px 6rpx 0px rgba(0, 0, 0, 0.1);
	&>view{
		flex-direction: column;
		align-items: center;
		position: relative;
		image{
			width:300rpx;
			height:150rpx;
		}
		.text{
			position: absolute;
			top: 44rpx;
			display: flex;
			flex-flow: column;
			left: 70rpx;
			color: rgba(59, 56, 75, 1);
			font-size: 28rpx;
			font-weight: 600;
            margin-top:4rpx;
		}
	}
}
.view-swiper
{
	width:calc(100% - 40rpx);
	margin-left:20rpx;
	height:240rpx;
	margin-top:38rpx;
	margin-bottom:38rpx;
}
.auth-view {
  position: fixed;
  background-color: white;
  width: 500rpx;
  height:372rpx;
  z-index: 999;
  left: calc(50% - 250rpx);
  top: calc(50vh - 186rpx);
  border-radius: 20rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.auth-view >view:first-child
{
    font-size: 32rpx;
    color: #333333;
    margin-top: 45rpx;
    font-weight: bold;
}

.auth-view >view:nth-child(2)
{
    margin-top:35rpx;
    margin-bottom: 48rpx;
    line-height: 50rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.auth-view >view:nth-child(2) view
{
  font-size: 30rpx;
  color: #333333;
  font-weight: normal;
}

.auth-view >view:last-child
{
  display: flex;
  flex-direction: row;
  height: 100rpx;
  width:100%;
  align-items: center;
}

.auth-view >view:last-child >view:first-child
{
  width:50%;  
  height: 100rpx;
  line-height: 100rpx;
  border-top:1px solid #DDDDDD;
  border-bottom-left-radius: 20rpx;
  text-align: center;
  font-size: 32rpx;
  color:#666666
}

.auth-view >view:last-child >view:last-child
{
  width:calc(50% - 1px);  
  height: 100rpx;
  line-height: 100rpx;
  border-top:1px solid #DDDDDD;
  border-left:1px solid #DDDDDD;
  border-bottom-right-radius: 20rpx;
  text-align: center;
  font-size: 32rpx;
  color:#19B452;
  display:flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.auth-btn {
  background-color: white;
  color: #12BE6D;
  text-align: center;
  font-weight: 500;
  font-size: 30rpx !important;
  width: 200rpx !important;
  height:70rpx !important;;
  line-height: 70rpx !important;
}

button:after{
  border:none;
}

.left-10
{
	margin-left:10rpx;
}

.right-5
{
	margin-right:5rpx;
}

.top-40
{
  margin-top:40rpx;	
}
.line
{
	width:calc(100% - 40rpx);
	margin:20rpx;
	height:1px;
	background-color:rgba(216, 216, 216, 1);
}
.mask {
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 99;
    top: 0;
    left: 0;
    background: #000000;
    opacity: 0.49;
}
.videoBox{
	position: fixed;
	top: 0;
	padding-top: 35vh;
	z-index: 100;
	left:0;
	width:100%;
	height: 100%;
	video{
		width: 100%;
		height: 400rpx;
	}
}
.bottom-space
{
	width:100%;
	height:20rpx;
	background: rgba(251, 251, 251, 1);
}

.getMoreBox{
	display: flex;
	padding: 0 30rpx;
	justify-content: space-between;
	height: 50rpx;
	line-height: 50rpx;
	color: #1F1F1F;
	text-align: center;
	font-size: 26rpx;
	margin: 30rpx auto;
	font-weight: 800;
	border-radius: 50rpx;
	&>.left{
		font-size: 40rpx;
		font-weight: 800;
		color: rgba(31, 31, 31, 1);
		font-style: italic;
		display: flex;
		align-items: center;
		.line-mark {
			width: 8rpx;
			height: 40rpx;
			margin-right: 20rpx;
			border-radius: 6rpx;
			background: linear-gradient(103.69deg, rgba(0, 191, 91, 1) 0%, rgba(177, 201, 62, 1) 100%), rgba(119, 78, 78, 1);

		}
	}
	&>.right {
		display: flex;
		align-items: center;
		color: rgba(195, 195, 195, 1);
		font-size: 24rpx;
	}
	.arrow-box {
		width: 26rpx;
		height: 26rpx;
		display: flex;
    align-items: center;
    margin-left: 12rpx;
	}
	image {
		width: 100%;
		height: 100%;
	}
}

.addsBox{
	box-sizing: border-box;
	width: 100vw;
	margin: 20rpx auto;
	border-radius: 100rpx 100rpx 0 0;
	height: 270rpx;
	padding: 20rpx;
	background: #FEFEFE;
}

.rantListBox{
	position: relative;
	&>view {
		background-color: #fff;
		padding-top: 18rpx;
		box-sizing: border-box;
		display: flex;
		overflow: hidden;
		position: absolute;
		background: rgba(249, 249, 249, 1);
		width: 100%;
		.back {
			width: 100%;
			image {
				width: 100%;
			}
		}
		.isTop {
			position: absolute;
			width: 30%;
			text-align: center;
			.title {
				font-size: 28rpx;
				font-weight: bold;
			}
			.desc {
				font-size: 24rpx;
			}
		}
		.isTop.first {
			left: 35%;
			top: 128rpx;
			color: rgba(139, 87, 42, 1);
		}
		.isTop.second {
			left: 5%;
			top: 176rpx;
			color: rgba(111, 111, 111, 1);
		}
		.isTop.third {
			left: 66%;
			top: 176rpx;
			color: rgba(167, 116, 87, 1);
		}
	}
	.list-content {
		position: absolute;
		top: 304rpx;
		width: 100%;
		display: flex;
		flex-flow: column;
		background: rgba(249, 249, 249, 1);
		.item-content {
			display: flex;
			margin: 0 30rpx 20rpx;
			border-radius: 20rpx;
			padding: 24rpx 0;
			background: rgba(255, 255, 255, 1);
		}
	}
	.rantItemLeftBox{
		line-height: 75rpx;
		width: 20%;
		text-align: center;
		font-weight: 800;
		font-size: 40rpx;
		color: #9B9B9B;
		image{
			margin-top: 10rpx;
			height: 54rpx;
			width: 50rpx;
		}
	}
	.rantItemRightBox{
		width: 70%;
		.title {
			color: #000000;
			font-size: 30rpx;
			font-weight: bold;
			text-overflow: ellipsis;
			white-space: nowrap;
			box-sizing: border-box;
			overflow: hidden;
		}
		
		&>text {
			font-size: 26rpx;
			color: #9C9C9C;
			line-height: 36rpx;
			// height: 74rpx;
			margin-top: 6rpx;
			display: block;
			text-overflow: ellipsis;
			white-space: nowrap;
			box-sizing: border-box;
			overflow: hidden;
		}
	}
	.bgRantImg{
		position: absolute;
		right: -30rpx;
		top: -16rpx;
		height: 146rpx;
	}
	
	// &>view:nth-child(even){
	// 	background: linear-gradient(135deg, #E0E0E0 0%, #FFFFFF 100%);
	// }
	// &>view:nth-child(odd){
	// 	background: linear-gradient(135deg, #FFF3E3 0%, #FFFFFF 100%);
	// }
	// .rantFir{
	// 	background: linear-gradient(135deg, #FFF3E3 0%, #FFFFFF 100%);
	// }
	// .rantScd{
	// 	background: linear-gradient(135deg, #E0E0E0 0%, #FFFFFF 100%);
	// }
	// .rantTri{
	// 	background:  linear-gradient(135deg, #E9DBD5 0%, #FFFFFF 100%);
	// }
}


.popupImgBox{
	position: fixed;
	z-index: 1000;
	width: 76%;
	height: 48%;
	left: 12%;
	top:24%;
	image{
		border-radius: 20rpx;
		height: 100%;
		width: 100%;
	}
	.closeImgBox{
		text-align: center;
		width: 68rpx;
		height:68rpx;
		margin: 30rpx auto;
	}
}

.loginBox{
	position: fixed;
	z-index: 100;
	top:20%;
	left: 10%;
	width: 80%;
	background-color: #19B452;
	border-radius: 10rpx;
	&>image{
		width: 100%;
	}
	.loginTxtBox{
		padding: 40rpx 10rpx;
		background-color: #fff;
		&>view:first-child{
			display: flex;
			justify-content: space-around;
			text{
				font-size: 24rpx;
				color: #6fb474;
			}
		}
		.yinsiTxt{
			text-decoration: underline;
		}
		.loginBtn{
			height:100rpx;
			line-height: 100rpx;
			text-align: center;
			color: #fff;
			font-size: 34rpx;
			width: 90%;
			margin: 30rpx auto;
			border-radius: 100rpx;
			background-color: #8cbe7f;
		}
		.loginCanClick{
			background-color: #65be3f;
		}
	}
	.loginOpacityBox{
		position: absolute;
		opacity: 0;
		z-index: 10;
		width: 90%;
		height: 100rpx;
		bottom: 70rpx;
		left: 5%;
		.loginOpacityBoxbtn{
			width: 100%;
			height: 100%;
		}
	}
}

.chatBox{
	position: fixed;
	bottom: 100rpx;
	right: 40rpx;
	img{
		height: 100rpx;
		width: 100rpx;
	}
}